<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8"/>
		<title>SIMPLER</title>
		
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href="css/style.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
		
		
		<!-- JS -->
		<script src="js/jquery-1.6.4.min.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
		<script src="js/custom.js"></script>
		<script src="js/tabs.js"></script>
		
		<!-- Tweet -->
		<link rel="stylesheet" href="css/jquery.tweet.css" media="all"  /> 
		<script src="js/tweet/jquery.tweet.js" ></script> 
		<!-- ENDS Tweet -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="css/superfish.css" /> 
		<script  src="js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script  src="js/superfish-1.4.8/js/superfish.js"></script>
		<script  src="js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- prettyPhoto -->
		<script  src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css"  media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="js/poshytip-1.1/src/tip-twitter/tip-twitter.css"  />
		<link rel="stylesheet" href="js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css"  />
		<script  src="js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
		
		<!-- Flex Slider -->
		<link rel="stylesheet" href="css/flexslider.css" >
		<script src="js/jquery.flexslider-min.js"></script>
		<!-- ENDS Flex Slider -->
		
		<!-- Masonry -->
		<script src="js/masonry.min.js" ></script>
		<script src="js/imagesloaded.js" ></script>
		<!-- ENDS Masonry -->
		
		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="css/lessframework.css"/>
		
		<!-- modernizr -->
		<script src="js/modernizr.js"></script>
		
		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="css/skin.css"/>
		

	</head>
	
	<body lang="en">
	
		
		
		
	
		<header>
			<div class="wrapper clearfix">
				
				<div id="logo">
					<a href="index.html"><img  src="img/logo.png" alt="Simpler"></a>
				</div>
				
				<!-- nav -->
				<ul id="nav" class="sf-menu">
					<li><a href="index.html">HOME</a></li>
					<li><a href="blog.html">BLOG</a></li>
					<li><a href="page.html">ABOUT</a>
						<ul>
							<li><a href="page-elements.html">Elements</a></li>
							<li><a href="page-icons.html">Icons</a></li>
							<li><a href="page-typography.html">Typography</a></li>
						</ul>
					</li>
					<li><a href="portfolio.html">WORK</a></li>
					<li class="current-menu-item"><a href="contact.html">CONTACT</a></li>
				</ul>
				<!-- ends nav -->
				
				<!-- comboNav -->
				<select id="comboNav">
					<option value="index.html" >HOME</option>
					<option value="blog.html">BLOG</option>
					<option value="page.html">ABOUT</option>
					<option value="page-elements.html">- Elements -</option>
					<option value="page-icons.html">- Icons -</option>
					<option value="page-typography.html">- Typography -</option>
					<option value="portfolio.html">WORK</option>
					<option value="contact.html" selected="selected">CONTACT</option>
				</select>
				<!-- comboNav -->
				
			</div>
		</header>
		
		
		
		<!-- MAIN -->
		<div id="main">	
			<div class="wrapper clearfix">

				<!-- masthead -->
				<div class="masthead clearfix">
					<h1>CONTACT</h1><span class="subheading">Get in touch</span>
				</div>
				<div class='mh-div'></div>
				<!-- ENDS masthead -->
				
				<!-- page content -->
	        	<div id="page-content" class="clearfix"> 
	        	
	        		<!-- GOOGLE MAPS -->
					<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAyXu_1Zw3-DbyonSxgLICyxSvd_PWAzQYT6cPPLRqr8-D213wYRS98SYvGv88GueR8G34jgm2pizkyA" ></script>
					<script type="text/javascript" >google.load("maps","2.x");</script>
					
					<script type="text/javascript">
						
						jQuery(document).ready(function($) {
						
						//##########################################
						// Google maps
						//##########################################
						
						// You can get the latitud and Longitude values at http://itouchmap.com/latlong.html
						
						var latitude = 44.8011821;
						var longitude = -68.7778138;
						
						// center map
						var map = new GMap2(document.getElementById("map")); 
						var point = new GLatLng(latitude, longitude); 
						map.setCenter(point, 16);
						
						// Set marker
						marker = new GMarker(point); 
						map.addOverlay(marker);
						
						// controls
						map.addControl(new GLargeMapControl());
						
						});
					</script>
					<h4 class="heading">Location</h4>
					<div id="map"></div>
					<!-- ENDS GOOGLE MAPS -->
       	
	        		<div class='section-div'></div>
	        		
					<!-- 2 cols -->
					<div class="left-page-block">
						<h4 class="heading">Contact form</h4>
						<!-- form -->
						<script type="text/javascript" src="js/form-validation.js"></script>
						<form id="contactForm" action="#" method="post">
							<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.</p>
							<fieldset>
								<div>
									<input name="name"  id="name" type="text" class="form-poshytip" title="Enter your full name" />
									<label>Name</label>
								</div>
								<div>
									<input name="email"  id="email" type="text" class="form-poshytip" title="Enter your email address" />
									<label>Email</label>
								</div>
								<div>
									
									<input name="web"  id="web" type="text" class="form-poshytip" title="Enter your website" />
									<label>Website</label>
								</div>
								<div>
									<textarea  name="comments"  id="comments" rows="5" cols="20" class="form-poshytip" title="Enter your comments"></textarea>
								</div>
								
								<!-- send mail configuration -->
								<input type="hidden" value="your@email.com" name="to" id="to" />
								<input type="hidden" value="ENter the subject here" name="subject" id="subject" />
								<input type="hidden" value="send-mail.php" name="sendMailUrl" id="sendMailUrl" />
								<!-- ENDS send mail configuration -->
								
								<p><input type="button" value="Send" name="submit" id="submit" /> <span id="error" class="warning">Message</span></p>
							</fieldset>
							
						</form>
						<p id="sent-form-msg" class="success">Form data sent. Thanks for your comments.</p>
						<!-- ENDS form -->
					</div>
					
					<div class="right-page-block">
						<h4 class="heading">Address info</h4>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor si tincidunt quis, accumsan porttitor, facilisis luctus, mets.</p>
		        		
		        		<ul class="address-block">
		        			<li class="address">Address line, city, state ZIP</li>
		        			<li class="phone">+123 456 789</li>
		        			<li class="mobile">+123 456 789</li>
		        			<li class="email"><a href="mailto:email@server.com">email@server.com</a></li>
		        		</ul>
					</div>
					<!-- ENDS 2 cols -->
					
					
					
					
				
        		</div>
        		<!-- ENDS page content -->
        	
        	

			<!-- Fold image -->
			<div id="fold"></div>
			</div>
			
		</div>
		<!-- ENDS MAIN -->
		
		
		<footer>	
			
			<div class="wrapper clearfix">
				
				<!-- widgets -->
				<ul  class="widget-cols clearfix">
					<li class="first-col">
						
						<div class="widget-block">
							<h4>RECENT POSTS</h4>
							<div class="recent-post clearfix">
								<a href="#" class="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
							<div class="recent-post clearfix">
								<a href="#" class="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
							<div class="recent-post clearfix">
								<a href="#" class="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
						</div>
					</li>
					
					<li class="second-col">
						
						<div class="widget-block">
							<h4>FREE TEMPLATES &amp; THEMES</h4>
							<p>Visit <a href="http://templatecreme.com/" >Template Creme</a> and browse the selection of well-made FREE Templates and WordPress Themes.</p>
						</div>
						
					</li>
					
					<li class="third-col">
						
						<div class="widget-block">
							<div id="tweets" class="footer-col tweet">
		         				<h4>TWITTER WIDGET</h4>
		         			</div>
		         		</div>
		         		
					</li>
					
					<li class="fourth-col">
						
						<div class="widget-block">
							<h4>FREE TEMPLATES &amp; THEMES</h4>
							<p>Visit <a href="http://templatecreme.com/" >Template Creme</a> and browse the selection of well-made FREE Templates and WordPress Themes.</p>
						</div>
		         		
					</li>	
				</ul>
				<!-- ENDS widgets -->	
				
				
				<!-- bottom -->
				<div class="footer-bottom">
					<div class="left">Simpler Template by <a href="http://www.luiszuno.com" >luiszuno.com</a></div>
					<div class="right">
						<ul id="social-bar">
							<li><a href="http://www.facebook.com"  title="Become a fan" class="poshytip"><img src="img/social/facebook.png"  alt="Facebook" /></a></li>
							<li><a href="http://www.twitter.com" title="Follow my tweets" class="poshytip"><img src="img/social/twitter.png"  alt="twitter" /></a></li>
							<li><a href="http://www.google.com"  title="Add to the circle" class="poshytip"><img src="img/social/plus.png" alt="Google plus" /></a></li>
						</ul>
					</div>
				</div>	
				<!-- ENDS bottom -->		

			</div>
		</footer>
		
			
	</body>
	
</html>